<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>作业提交情况</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs">作业管理系统</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/teacher/assignment/list">作业管理</a></li>
            </ul>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" style="padding: 15px;">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="layui-font-16">作业提交情况</span>
                    <a href="${pageContext.request.contextPath}/teacher/assignment/list" 
                       class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;">
                        <i class="layui-icon layui-icon-return"></i>返回列表
                    </a>
                </div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>提交时间</th>
                                <th>内容</th>
                                <th>成绩</th>
                                <th>评语</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${submissions}" var="submission">
                                <tr>
                                    <td>${submission.studentNo}</td>
                                    <td>${submission.studentName}</td>
                                    <td><fmt:formatDate value="${submission.submitTime}" pattern="yyyy-MM-dd HH:mm"/></td>
                                    <td>
                                        <button class="layui-btn layui-btn-xs" onclick="viewContent('${submission.content}')">
                                            查看内容
                                        </button>
                                    </td>
                                    <td>${submission.grade != null ? submission.grade : '未批改'}</td>
                                    <td>${submission.comment}</td>
                                    <td>
                                        <button class="layui-btn layui-btn-xs" onclick="grade(${submission.submissionId})">
                                            <i class="layui-icon layui-icon-edit"></i>批改
                                        </button>
                                    </td>
                                </tr>
                            </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 批改作业的表单 -->
    <div id="gradeForm" style="display: none; padding: 20px;">
        <form class="layui-form" lay-filter="gradeForm">
            <input type="hidden" name="submissionId">
            <input type="hidden" name="aid" value="${param.aid}">
            <div class="layui-form-item">
                <label class="layui-form-label">成绩</label>
                <div class="layui-input-block">
                    <input type="number" name="grade" required lay-verify="required|number" min="0" max="100" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">评语</label>
                <div class="layui-input-block">
                    <textarea name="comment" class="layui-textarea" rows="4"></textarea>
                </div>
            </div>
        </form>
    </div>

    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer;
            var form = layui.form;
            
            // 表单验证规则
            form.verify({
                number: [/^\d+$/, '请输入0-100的整数']
            });
        });
        
        function viewContent(content) {
            layer.open({
                type: 1,
                title: '提交内容',
                area: ['600px', '400px'],
                content: '<div style="padding: 20px;">' + content + '</div>'
            });
        }
        
        function grade(submissionId) {
            layer.open({
                type: 1,
                title: '批改作业',
                area: ['500px', '400px'],
                content: $('#gradeForm'),
                btn: ['保存', '取消'],
                yes: function(index, layero){
                    var form = layero.find('form');
                    form.find('input[name="submissionId"]').val(submissionId);
                    $.post('${pageContext.request.contextPath}/teacher/assignment/grade', form.serialize(), function(){
                        layer.msg('批改成功');
                        location.reload();
                    });
                }
            });
        }
    </script>
</body>
</html> 